<template>
	<view class="chat-container bg-white">
		<customTabBar />
		<template v-for="item in friendConversation">
			<view class="chat" v-if="item.type === 'C2C'" :key="item.conversationID" @longpress="longTimePress(item)" @click="checkoutConversation(item, item.userProfile.nick || item.userProfile.userID)">
				<view class="avatar-container">
					<image :src="item.userProfile.avatar || '/static/images/avatar.png'" class="avatar" />
				</view>
				<view class="right">
					<view class="information">
						<view class="username">{{item.userProfile.nick || item.userProfile.userID}}</view>
						<view class="content" v-if="!item.lastMessage.isRevoked">{{item.lastMessage.messageForShow}}</view>
						<view class="content" v-else>
							<template v-if="myInfo.userID === item.lastMessage.fromAccount">你撤回了一条消息</template>
							<template v-else>{{item.lastMessage.fromAccount}}撤回了一条消息</template>
						</view>
					</view>
					<view class="time">
						<view class="last">{{item.lastMessage._lastTime}}</view>
						<view class="remain" v-if="item.unreadCount > 0">
							<text v-if="item.unreadCount > 99" class="info">99+</text>
							<text v-else class="info">{{item.unreadCount}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="chat" v-else-if="item.type === 'GROUP'" @click="checkoutConversation(item, item.groupProfile.name || item.groupProfile.ID)"
			 :key="item.conversationID" @longpress="longTimePress(item)">
				<view class="avatar-container">
					<image :src="item.groupProfile.avatar" class="avatar" />
				</view>
				<view class="right">
					<view class="information">
						<view class="username">{{item.groupProfile.name || item.groupProfile.groupID}}</view>
						<view class="content" v-if="!item.lastMessage.isRevoked">
							<template v-if="item.lastMessage.fromAccount === '@TIM#SYSTEM'">{{item.lastMessage.messageForShow}}</template>
							<template v-else>{{item.lastMessage.fromAccount}}：{{item.lastMessage.messageForShow}}</template>
						</view>
						<view class="content" v-else>
							<template v-if="myInfo.userID === item.lastMessage.fromAccount">你撤回了一条消息</template>
							<template v-else>{{item.lastMessage.fromAccount}}撤回了一条消息</template>
						</view>
					</view>
					<view class="time">
						<view class="last">{{item.lastMessage._lastTime}}</view>
						<view class="remain" v-if="item.unreadCount > 0">
							<text v-if="item.unreadCount > 99" class="info">99+</text>
							<text v-else class="info">{{item.unreadCount}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<no-data v-if="!friendConversation.length" />
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import customTabBar from "../.././components/recruit/custom-tab-bar.vue";

	export default {
		data() {
			return {
				conversation: {}
			};
		},
		computed: {
			friendConversation() {
				return this.allConversation.filter(item => item.type === "C2C");
			},
			...mapGetters([
				"timTotalUnreadCount",
				"allConversation",
				"isSdkReady",
				"myTimInfo"
			])
		},
		components: {
			customTabBar
		},
		onPullDownRefresh() {
			this.$throttle(uni.$Tim.getConversationList(), 1000);
			uni.stopPullDownRefresh();
		},
		onShow() {
			this.$store.dispatch("recruit/setCurrentTabbar", 2);
		},
		onLoad() {
			if (!this.isSdkReady) {
				uni.showLoading({
					title: "正在同步数据",
					mask: true
				});
			}
		},
		methods: {
			// 长按删除会话
			longTimePress(item) {
				this.conversation = item;
				this.handleModalShow();
			},
			handleModalShow() {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确认删除会话？",
					success: res => {
						res.confirm && _this.handleConfirm();
					}
				});
			},
			handleConfirm() {
				this.deleteConversation(this.conversation);
			},
			// 将某会话设为已读
			setMessageRead(item) {
				if (item.unreadCount === 0) return;

				uni.$Tim.setMessageRead({
					conversationID: item.conversationID
				});
			},
			// 点击某会话
			checkoutConversation(item, name) {
				const params = {
					url: "/pages/recruit/chat-box/index",
					conversationID: item.conversationID
				};
				this.$store.dispatch("tim/checkoutConversation", params);
			},
			// 删除会话
			deleteConversation(item) {
				uni.$Tim.deleteConversation(item.conversationID).then(res => {
					console.log("delete success", res);
				});
			}
		}
	};
</script>

<style lang="less">
	.chat-container {
		min-height: 100vh;
		box-sizing: border-box;
		border-bottom: 1px solid #dbdbdb;

		.chat {
			background-color: white;
			box-sizing: border-box;
			display: flex;
			height: 72px;

			.avatar-container {
				padding: 12px;
				box-sizing: border-box;

				.avatar {
					width: 100rpx;
					height: 100rpx;
					display: inline-block;
					border-radius: 50%;
					background: #eee;
				}
			}
		}
	}

	.information {
		display: flex;
		flex-direction: column;
		padding-right: 10px;
		height: 48px;
		width: 60%;
		flex-grow: 1;

		.username {
			color: #111111;
			font-size: 18px;
			line-height: 28px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.content {
			color: #999999;
			font-size: 14px;
			overflow: hidden;
			line-height: 20px;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.right {
		padding: 12px 0;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		border-bottom: 1px solid #f1f1f1;
		width: calc(100% - 80px); // 80px 是头像框的宽度
		flex-grow: 1;
	}

	.time {
		padding-right: 16px;
		display: flex;
		flex-direction: column;
		flex-basis: 100px;
		text-align: right;

		.last {
			color: #999999;
			font-size: 12px;
			line-height: 28px;
		}

		.remain {
			display: flex;
			flex-direction: row-reverse;

			.info {
				color: white;
				font-size: 12px;
				background-color: #fb5250;
				border-radius: 30px;
				padding: 2px 7px 3px;
			}
		}
	}

	.input {
		text-align: center;
		height: 32px;
		background-color: white;
		border-radius: 8px;
		font-size: 16px;
	}

	.content-red {
		color: #fb5250;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 80%;
	}

	.delete {
		color: white;
		font-size: 14px;
		font-weight: 600;
		background-color: #fb5250;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.delete-button {
		text-align: center;
	}
</style>
